{% extends "base.html" %}

{% block subtitle %}
  Exploration Editor
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    GLOBALS.can_edit = JSON.parse('{{can_edit|js_string}}');
  </script>
  {{dependencies_html}}
{% endblock header_js %}

{% block navbar_additions %}
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Help
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown">
        <a href="https://code.google.com/p/oppia/wiki/PlanningYourExploration" target="_blank">
          Planning Your Exploration
        </a>
      </li>
      <li class="dropdown">
        <a href="https://code.google.com/p/oppia/wiki/DesignTips" target="_blank">
          Exploration Design Tips
        </a>
      </li>
    </ul>
  </li>
{% endblock %}

{% block content %}
  {% if announcement %}
    <div class="oppia-align-center oppia-warning">
      {{ announcement }}
    </div>
  {% endif %}

  <div ng-controller="ExplorationEditor" ng-cloak>
    <script type="text/ng-template" id="modals/publishExploration">
      <div class="modal-header">
        <h3>Publish Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to publish an exploration!
        </p>
        <p>
          <strong>Important:</strong> Site moderators are likely to remove published explorations that do not meet the following basic criteria (<a href="/site_guidelines#/publish-and-release-criteria" target="_blank">why?</a>):
          <ul>
            <li>It should help its intended audience learn something new.</li>
            <li>It should convey more than a single isolated factoid.</li>
            <li>It should provide useful feedback and guidance to help the learner (and not just 'Correct'/'Incorrect').</li>
            <li>It should not substantially duplicate existing explorations.</li>
          </ul>
        </p>
        <p>
          You can read more about these criteria on the <a href="/site_guidelines#/publish-and-release-criteria" target="_blank">exploration publishing criteria</a> page.
        </p>

        <p>
          If your exploration meets all these criteria, please feel free to publish
          it so that others can playtest and improve it! Good explorations can subsequently be
          moved to the Learn gallery. (You can find more information
          <a href="/site_guidelines#/how-to-use" target="_blank">here</a>
          about how this works.)
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-success" ng-click="publish()">Publish</button>
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/nominateExploration">
      <div class="modal-header">
        <h3>Nominate exploration for release</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to submit your exploration to be reviewed for release! Once released, the exploration will appear in the Learn gallery for everyone to learn from.
        </p>

        <p>
          Currently, the review process is a manual, moderator-driven process.
          When you submit an exploration for review, a moderator will play through
          it, look at its structure, and decide whether it fits the
          <a href="/site_guidelines#publish-and-release-criteria">release criteria</a>.
          If not, the moderator will make a series of specific suggestions on how
          to make the exploration satisfy the criteria, and work with the editor(s)
          to get it ready for release.
        </p>

        <p>
          <strong>To kick off the review process</strong>, please make a post to the
          <a href="{{moderator_request_forum_url}}" target="_blank">request forum</a>, and
          include a link to your exploration.
        </p>
      </div>

      <div class="modal-footer">
        <a class="btn btn-success" href="{{moderator_request_forum_url}}" target="_blank">Post in the request forum</a>
        <button class="btn btn-default" ng-click="close()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/embedExploration">
      <div class="modal-header">
        <h3>Embed exploration in another web page</h3>
      </div>

      <div class="modal-body">
        <p>
          To embed this exploration, copy the following HTML into the source code of your webpage:
        </p>

        <pre>
&lt;oppia oppia-id="<[explorationId]>" src="<[serverName]>"
       exploration-version="<[explorationVersion]>"&gt;
&lt;/oppia&gt;

&lt;script src="https://cdn.jsdelivr.net/oppia/0.0.1/oppia-player.min.js"&gt;
&lt;/script&gt;</pre>

        <p>
          Note that the last two lines only need to be included once in the embedding webpage, even if you are embedding multiple explorations. For more information, please have a look at our <a href="https://code.google.com/p/oppia/wiki/EmbeddingYourExploration">documentation</a>.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="close()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteExploration">
      <div class="modal-header">
        <h3>Delete Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Really delete this exploration? <strong>This action cannot be reversed.</strong>
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="reallyDelete()">Delete</button>
        <button class="btn btn-default" ng-click="cancel()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteState">
      <div class="modal-header">
        <h3>Delete State</h3>
      </div>

      <div class="modal-body">
        <p>
          Are you sure you want to delete the state "<[deleteStateName]>"?
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="reallyDelete()">Delete</button>
        <button class="btn btn-default" ng-click="cancel()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/saveExploration">
      <div class="modal-header">
        <h3>Save Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          You are about to save changes to this exploration. These changes will immediately be visible to other viewers.
        </p>
        <p>
          <span ng-if="commitMessageIsOptional">(Optional)</span>
          Please enter a brief description of what you have changed:
          <textarea rows="3" cols="50" ng-model="commitMessage" autofocus></textarea>
        </p>

        <div ng-if="explorationChangesExist">
          <em>
            You changed the following properties of the exploration:
          </em>
          <ul>
            <li ng-repeat="(propertyName, changeInfo) in explorationPropertyChanges">
              <[formatExplorationPropertyChange(propertyName, changeInfo)]>
            </li>
          </ul>
        </div>

        <p ng-if="addedStates.length > 0">
          <em>You added the following states</em>: <strong><[formatStateList(addedStates)]></strong>
        </p>

        <div ng-if="stateChangesExist">
          <em>
            You made the following changes to states:
          </em>
          <div ng-repeat="(stateName, stateChanges) in statePropertyChanges">
            <h5><[stateName]></h5>
            <ul>
              <li ng-repeat="(propertyName, changeInfo) in stateChanges">
                <[formatStatePropertyChange(propertyName, changeInfo)]>
              </li>
            </ul>
          </div>
        </div>

        <p ng-if="deletedStates.length > 0">
          <em>You deleted the following states:</em> <strong><[formatStateList(deletedStates)]></strong>
        </p>

        <p ng-if="changedStates.length > 0">
          <em>You changed the following states:</em> <strong><[formatStateList(changedStates)]></strong>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-disabled = "!commitMessageIsOptional && !commitMessage" ng-click="save(commitMessage)">Save</button>
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <div class="container">
      <div class="row" ng-if="explorationRightsService.isCloned()">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="oppia-align-center alert alert-warning" style="padding: 2px; width: 90%;">
            <strong>Note:</strong> This is a private, unpublishable copy of a
            <a ng-href="<[getExplorationUrl(explorationRightsService.clonedFrom())]>" target="_blank">public exploration</a>.
            You are very welcome to submit feedback to improve the original exploration: to do this,
            click the previous link, then click the green Feedback button on the left of the page.
            Thank you!
          </div>
        </div>
      </div>

      <div class="row oppia-exploration-editor-top-row">
        <div class="col-lg-5 col-md-5 col-sm-5">
          <div>
            <span class="oppia-page-title">
              <[explorationTitleService.displayed]>
            </span>
            <span ng-if="explorationRightsService.isPrivate()" class="label label-info">
              Private
            </span>
            <span ng-if="explorationRightsService.isPublic()" class="label label-info">
              Beta
            </span>
            <span ng-if="explorationRightsService.isPublicized()" class="label label-info">
              Released
            </span>
            <span ng-if="explorationRightsService.isCloned()" class="label label-info">
              Cloned
            </span>
            <span ng-if="explorationRightsService.isCommunityOwned()" class="label label-info">
              Community-owned
            </span>
          </div>

          <div>
            <span ng-if="explorationObjectiveService.displayed">
              <strong>Aim of the exploration:</strong> to help learners <[explorationObjectiveService.displayed]>.
            </span>
            <span ng-if="!explorationObjectiveService.displayed" class="oppia-missing-objective-error">
              Please specify this exploration's objective (in the Settings tab).
            </span>
          </div>
        </div>

        <div class="col-lg-7 col-md-7 col-sm-7">
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
              <span class="pull-right" style="margin-top: 10px;">

                {% if can_publish %}
                  <span ng-if="explorationRightsService.isPrivate()">
                    <button type="button" class="btn btn-default oppia-main-control-button" ng-class="{'btn-success': !isExplorationLockedForEditing() && !warningsList.length}" ng-click="showPublishExplorationModal()" ng-disabled="isExplorationLockedForEditing() || warningsList.length">
                      publish
                    </button>
                    <img class="oppia-help" src="/images/help.png"
                         tooltip="Click this button to publish your exploration to the playtest queue."
                         tooltip-placement="bottom">
                  </span>
                {% endif %}

                <span class="oppia-exploration-ctrl" ng-if="editabilityService.isEditable() && explorationRightsService.isPublic()">
                  <button type="button" class="btn btn-default oppia-main-control-button" ng-click="showNominateExplorationModal()" ng-disabled="isExplorationSaveable()" ng-class="{'btn-success': !isExplorationSaveable()}">
                    nominate for release
                  </button>
                  <img class="oppia-help" src="/images/help.png"
                       tooltip="Click this button to nominate this exploration for release from beta status, so that it appears in the Learn Gallery by default."
                       tooltip-placement="bottom">
                </span>

                <span class="oppia-exploration-ctrl" ng-if="!explorationRightsService.isPrivate()">
                  <button class="btn btn-default" title="Embed this exploration in another webpage." ng-click="showEmbedExplorationModal()" ng-disabled="isExplorationSaveable()">
                    <span class="glyphicon glyphicon-share"></span>
                  </button>
                </span>

                <a class="btn btn-default" target="_blank" href="/explore/<[explorationId]>" ng-disabled="isExplorationSaveable()"
                   title="Play this exploration in a new window.">
                  <span class="glyphicon glyphicon-play"></span>
                </a>

                <span ng-if="editabilityService.isEditable()">
                  <button class="btn oppia-main-control-button" ng-class="{'btn-success': isExplorationSaveable()}" ng-click="saveChanges()" ng-disabled="!isExplorationSaveable()">
                    save changes
                    <span ng-if="getChangeListLength()">(<[getChangeListLength()]>)</span>
                  </button>

                  <button class="btn btn-default oppia-main-control-button" ng-click="discardChanges()" ng-disabled="!isExplorationSaveable()">discard changes</button>
                </span>
              </span>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
              <div ng-show="warningsList.length" ng-click="toggleExplorationWarningVisibility()">
                <div class="alert alert-warning pull-right" style="padding: 2px 5px; margin-bottom: 2px; cursor: pointer; position: absolute; opacity: 1; z-index: 5;">
                  <div>
                    <span ng-if="!areExplorationWarningsVisible" style="color: black;">
                      <span class="glyphicon glyphicon-plus-sign"></span>
                    </span>
                    <span ng-if="areExplorationWarningsVisible" style="color: black;">
                      <span class="glyphicon glyphicon-minus-sign"></span>
                    </span>
                    <span class="glyphicon glyphicon-warning-sign"></span>
                    This exploration has <strong><[warningsList.length]></strong> warning(s).
                  </div>
                  <div collapse="!areExplorationWarningsVisible">
                    <ul>
                      <li ng-repeat="warningText in warningsList track by $index">
                        <[warningText]>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <tabset>
          <tab heading="Main" active="mainTabActive" select="selectMainTab()">
            <div class="row">
              <div class="col-lg-9 col-md-9 col-sm-9" ng-controller="StateEditor">
                {% include 'editor/state_editor.html' %}
              </div>
              <div class="col-lg-3 col-md-3 col-sm-3">
                {% include 'editor/exploration_graph.html' %}
                <hr class="oppia-graph-and-stats-separator">
                {% include 'editor/state_statistics.html' %}
              </div>
            </div>
          </tab>

          <tab heading="Statistics" active="statsTabActive" select="selectStatsTab()">
            {% include 'editor/exploration_statistics.html' %}
          </tab>

          <tab heading="Settings" active="settingsTabActive" select="selectSettingsTab()">
            {% include 'editor/exploration_settings.html' %}
          </tab>

          <tab heading="History" active="historyTabActive" select="selectHistoryTab()" disabled="explorationRightsService.isCloned()">
            {% include 'editor/exploration_history.html' %}
          </tab>

          <tab heading="<[feedbackTabHeader]>" active="feedbackTabActive" select="selectFeedbackTab()">
            {% include 'editor/exploration_feedback.html' %}
          </tab>
        </tabset>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="inline/param_change_editor">
    {% include 'components/param_change_editor.html' %}
  </script>

  <script type="text/ng-template" id="inline/rule_editor">
    {% include 'components/rule_editor.html' %}
  </script>

{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3.2.8/d3.min.js"></script>
  <script>
    {{ include_js_file('editor/EditorServices.js') }}
    {{ include_js_file('editor/ExplorationEditor.js') }}
    {{ include_js_file('components/valueGeneratorEditor.js') }}
    {{ value_generators_js }}
    {{ include_js_file('components/objectEditor.js') }}
    {{ object_editors_js }}
    {{ include_js_file('editor/ExplorationStatistics.js') }}
    {{ include_js_file('editor/ExplorationSettings.js') }}
    {{ include_js_file('editor/ExplorationHistory.js') }}
    {{ include_js_file('editor/ExplorationFeedback.js') }}
    {{ include_js_file('editor/StateEditor.js') }}
    {{ include_js_file('editor/StateStatistics.js') }}
    /* These should come after the valueGeneratorEditor scripts. */
    {{ include_js_file('editor/InteractiveWidgetEditor.js') }}
    {{ include_js_file('components/paramChangeEditor.js') }}
    {{ include_js_file('components/ruleEditor.js') }}
  </script>

  {{ widget_js_directives }}
{% endblock footer_js %}
